<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// cesium的默认视角
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
//   -100.0,
//   20.0,
//   -90.0,
//   30.0
// );
onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),

    /**
     * 下载数据源： 地理空间数据云
     * https://www.gscloud.cn/sources/index?pid=302&ptitle=DEM%20%E6%95%B0%E5%AD%97%E9%AB%98%E7%A8%8B%E6%95%B0%E6%8D%AE&rootid=1
     * 数据资源 -> DEM数字高程数据 -> GDEMV3 30M 分辨率数字高程数据
 -> 经度 113.5 -> 纬度 23.5 -> 点击下载
     * 数据转换 https://www.cesiumlab.com/ 下载指定的工具exe解压
     * 生成目标数据 下载地址 https://www.cesiumlab.com/downcenter.html
     * CesiumLab地理信息基础数据处理平台v3.0.4版本
     * 选择 地形切片 -> 输入文件 -> 处理参数 【三角算法】vcg -> 输出文件 【存储类型】紧凑pak --> 提交处理  -> 等待十几分钟 即可
     */

    // 仅仅加载指定地区的数据
    // terrainProvider: Cesium.createWorldTerrain({
    //   // url: './terrains/gz'
    // }),
    //信息窗口
    infoBox: false,
    // //显示查询按钮
    // // geocoder: false,
    // //home按钮
    // // homeButton: false,
    // // 控制查看器的显示模式-地球/平面
    // sceneModePicker: true,
    // // 是否显示图层选择
    // baseLayerPicker: false,
    // //帮助按钮
    // navigationHelpButton: false,
  });

  // 将经纬度转换为笛卡尔坐标系
  // const cartesian3 = Cesium.Cartesian3.fromDegrees(89.5, 20.4, 100);
  // console.log(cartesian3);
  // 将经纬度转换为笛卡尔坐标系
  // const cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
  // console.log(cartographic);

  // 广州塔位置
  const gzPosi = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000);
  // flyTo ，让相机飞往某地方
  // viewer.camera.flyTo({
  //   destination: gzPosi,
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0),
  //     pitch: Cesium.Math.toRadians(-80.0),
  //     roll: 0,
  //   },
  //   duration: 10,
  // });

  // 添加3D建筑
  const building = viewer.scene.primitives.add(new Cesium.createOsmBuildings());

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 使用entities 创建矩形
  const rectangle = viewer.entities.add({
    name: 'Rectangle',
    // position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000),
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        90,
        20, // 左上角的点
        110,
        30 // 右下角的点
      ),
      material: Cesium.Color.RED.withAlpha(0.5), // 材质颜色
      outline: true,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
    },
  });

  // 几何体 实例
  const instance = new Cesium.GeometryInstance({
    id: 'instance',
    //primivite 创建矩形 【官网案例】api https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
    geometry: new Cesium.RectangleGeometry({
      // 创建几何体
      // API https://cesium.com/learn/cesiumjs/ref-doc/RectangleGeometry.html?classFilter=RectangleGeometry
      rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
      height: 0,
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT, // 每个实例的颜色外观
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8),
    },
  });

  const anotherInstance = new Cesium.GeometryInstance({
    id: 'anotherInstance',
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8),
    },
  });

  // 创建图元
  const primitive = new Cesium.Primitive({
    geometryInstances: [instance, anotherInstance], // 同时有多个几何体
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true, // 平坦 - 平坦的阴影。不考虑照明。https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/#appearances
    }),
  });

  // 添加到场景中 https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
  viewer.scene.primitives.add(primitive);

  // 设置相机位置
  // viewer.camera.setView(viewer.scene);

  // 动态修改图元 颜色
  setInterval(() => {
    const attributes = primitive.getGeometryInstanceAttributes('instance');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
      Cesium.Color.fromRandom({ alpha: 1.0 })
    );
  }, 2000);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
